<template>
	<view class="home">
		<view class="positioning">
			<view class="lt">
				<image src="../../static/images/home_ico_dingwei@2x.png" mode="widthFix" class="img1"></image>
				<text>天健湖智慧产业园</text>
				<image src="../../static/images/home_ico_more@2x.png" mode="widthFix" class="img2"></image>
			</view> 
			<view class="rt">
				<image src="../../static/images/home_ico_qiandao@2x.png" mode="widthFix" class="img3"></image>
				<text>签到</text>
			</view>
		</view>
		<!-- 搜索 -->
		<view class="search">
			<input class="uni-input" type="search" placeholder="搜索打卡笔记">
			<image src="../../static/images/home_ico_serch@2x.png" mode="widthFix"></image>
		</view>
		<!-- 横向滚动列表 -->
		<view class="swiperPje">
			<scrollList :menuArr="menuArr"></scrollList>
		</view>
		<!-- 产品列表 -->
		<!-- <water></water> -->
		<view class="my-waterfall">
			<myWaterfall v-model="flowList">
				<template v-slot:left="{leftList}">
					<MyGoodsDemo :list="leftList"></MyGoodsDemo>
				</template>
				<template v-slot:right="{rightList}">
					<MyGoodsDemo :list="rightList"></MyGoodsDemo>
				</template>
			</myWaterfall>
			<!-- 加载更多 -->
			<!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> -->
		</view>
		
		
	</view>
</template>

<script>
	import scrollList from '../../components/scrollList/scrollList.vue'
	import myWaterfall from '../../components/u-myWaterfall.vue'
	import MyGoodsDemo from '@/components/MyGoodsDemo.vue'
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				list: [],
				menuArr: []
			}
		},
		onLoad() {
			this.blogHot();
			// this.addRandomData();
			// 商品分来
			this.shopType();
			
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				// this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
		methods: {
			blogHot(){
				// 查询热点blog
				uni.request({
					url:'blog/hot',
					method:'get',
					data:{current:1},
					header:{'Authorization':uni.getStorageSync('yystoken')},
					success: (obj) => {
						if(obj.statusCode == 200){
							this.list = obj.data.data
							console.log(this.list)
							// for(let i = 0; i < 10; i++) {
							// 	let index = this.$u.random(0, this.list.length - 1);
							// 	// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
							// 	let item = JSON.parse(JSON.stringify(this.list[index]))
							// 	console.log(item);
							// 	item.id = this.$u.guid();
							// 	this.flowList.push(item);
							// }
							this.flowList = this.list
							console.log('flowList数据',this.flowList)
						}
					}
				})
			},
			
			addRandomData() {
				for(let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					// console.log(item);
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			shopType(){
				// 分类菜单
				uni.request({
					url:'/shop-type/list',
					method:'get',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'token':uni.getStorageSync('yystoken'),
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						let data = obj.data.data;
						let arr = [[],[]]
						let nums = data.length/2;
						for (var i = 0; i < data.length; i++) {
							if(i < nums){
								arr[0].push(data[i])
							}else{
								arr[1].push(data[i])
							}
						}
						console.log(arr,"产品分类")
						this.menuArr = arr
					}
				})
				
			}
		},
		components:{
			scrollList,
			myWaterfall,
			MyGoodsDemo
		}
	}
</script>

<style lang="scss">
	.uni-scroll-view::-webkit-scrollbar{width:0;}
	.swiperPje{
		background-color: #fff;
		border-radius: 15rpx;
		padding: 0 20rpx;
	}
	.scroll-list__line__item__image{
		width: 80rpx !important;
		height: 80rpx !important;
	}
.home{
	padding: 30rpx;
	background: rgba(32,200,109,0.28);
	// filter: blur(50px);
	min-height: 100vh;
}
.positioning{
	display: flex;
	.lt{
		width: 60%;
		display: flex;
	
		.img1{
			width: 40rpx;
		}
		.img2{
			width: 40rpx;
		}
	}
	.rt{
		width: 40%;
		text-align: right;
		display: flex;
		justify-content: flex-end;	
		.img3{
			width: 38rpx;
			margin-right: 15rpx;
		}
	}
	text{
		font-size: 27rpx;
		color: #444444;
	}
}
.search{
	position: relative;
	margin: 15rpx 0 19rpx;
	input{
		height: 65rpx;
		background: #FFFFFF;
		border-radius: 33rpx;
		font-size: 27rpx;
		color: #999999;
		padding: 0 32rpx;
	}
	image{
		position: absolute;
		right: 32rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		width: 38rpx;
	}
}

.my-waterfall{
// width: calc(100% + 20rpx);
position: relative;
margin-top: 20rpx;
// left: -10rpx;

.waterfall-box {
	border-radius: 16rpx;
	margin: 10rpx;
	background-color: #ffffff;
	// padding: 16rpx;
	margin-bottom: 16rpx;
	position: relative;
	.box-item-title{
		// width: 320rpx;
		font-size: 26rpx;
		margin-top: 10rpx;
		color: #434343;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;				
		text-overflow: ellipsis;		
		display: -webkit-box;			
		-webkit-line-clamp: 2;			
		line-clamp: 2;					
		-webkit-box-orient: vertical;	
	}
	.box-item-price{
		font-size: 30rpx;
		color:#ff4142;
		margin-top: 10rpx;
	}
	.box-item-tag{
		display: flex;
		margin-top: 10rpx;
		.tag-owner{
			background-color:#FF4142;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 4rpx 14rpx;
			border-radius: 50rpx;
			font-size: 16rpx;
			line-height: 1;
		}
		.tag-text {
			border: 1px solid #FF4142;
			color: #FF4142;
			margin-left: 20rpx;
			border-radius: 50rpx;
			line-height: 1;
			padding: 4rpx 14rpx;
			display: flex;
			align-items: center;
			font-size: 20rpx;
		}
	}
	.box-comment{
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
}

}
</style>
